<template>
	<view class="content">
		<view class="carousel">
			<swiper :indicator-dots="true" :circular="true" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item v-for="(val, index) of bannerList" :key="index">
					<view class="swiper-item">
						<!-- 跳转详情页面 -->
						<navigator :url="'./ifram?src=' + val.src">
							<image @error="AppService" :src="val.url" :data-index="index" mode=""></image>
						</navigator>
					</view>
				</swiper-item>
			</swiper>
			<view class="notice">
				<swiper :autoplay="true" :interval="3000" :duration="1000" vertical="true" :circular="true">
					<swiper-item v-for="(val, index) of noticeList" :key="index">
						<view class="swiper-item">
							<navigator :url="'../notice/noticeList?id=' + val[0]['id']">{{ val[0]['title'] }}</navigator>
						</view>
						<view class="swiper-item" v-if="val[1]">
							<navigator :url="'../notice/noticeList?id=' + val[1]['id']">{{ val[1]['title'] }}</navigator>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<swiper class="nav_h" :indicator-dots="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item>
				<view class="nav">
					<view class="link" @tap="nav('../apply/apply')">
						<image src="../../static/img/navicon01.png" mode=""></image>
						<text>在线申请</text>
					</view>
					<view class="link" @tap="nav('../transfer/Inquire')">
						<image src="../../static/img/navicon02.png" mode=""></image>
						<text>在线过户</text>
					</view>
					<view class="link" @tap="nav('../schedule/schedule')">
						<image src="../../static/img/navicon03.png" mode=""></image>
						<text>进度查询</text>
					</view>

					<view class="link" @tap="nav('../nianjian/nianjian')">
						<image src="../../static/img/nianjian.png" mode=""></image>
						<text>犬只年检</text>
					</view>

					<!-- <view class="link" @tap="nav('../ExposureStation/noticeList')">
						<image src="../../static/img/navicon04.png" mode=""></image>
						<text>曝光台</text>
					</view> -->
					<view class="link" @tap="nav('../ReportLoss/ReportLoss')">
						<image src="../../static/img/navicon05.png" mode=""></image>
						<text>一键寻犬</text>
					</view>
					<view class="link" @tap="nav('../dogLogout/dogLogout')">
						<image src="../../static/img/navicon06.png" mode=""></image>
						<text>犬只注销</text>
					</view>
					<view class="link" @tap="nav('../StrayDogs/StrayDogs')">
						<image src="../../static/img/navicon07.png" mode=""></image>
						<text>流浪犬举报</text>
					</view>
					<view class="link" @tap="nav('../ExposureStation/noticeList')">
						<image src="../../static/img/navicon04.png" mode=""></image>
						<text>曝光台</text>
					</view>
					<!-- <view class="link" @tap="nav('../Report/Report')">
						<image src="../../static/img/navicon08.png" mode=""></image>
						<text>犬只举报</text>
					</view> -->
				</view>
			</swiper-item>
			<swiper-item>
				<view class="nav">
					<view class="link" @tap="nav('../Report/Report')">
						<image src="../../static/img/navicon08.png" mode=""></image>
						<text>犬只举报</text>
					</view>
				</view>
			</swiper-item>
		</swiper>

		</scroll-view>
		<view class="daily">
			<view class="title">
				<text>日常动态·寻犬信息</text>
				<navigator url="../daily/dailyList">查看更多</navigator>
			</view>
			<navigator class="dailyItem" v-for="(val, index) of dailyList" :key="index" :url="'../daily/dailyDetails?id=' + val.id">
				<view>{{ val.title }}</view>
				<view>{{ val.time }}</view>
			</navigator>
		</view>
		<view class="moreTip">更多功能敬请期待</view>
		<view @tap="nav('../personal/personal')" class="fixed"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import CHONG from '../../static/js/function.js';
	export default {
		computed: mapState(['URL', 'TOKEN', 'UPDATE']),
		data() {
			return {
				bannerList: [],
				noticeList: [],
				dailyList: [],
				isTap: false,
				isLa: true,
				correctUrl: '../../static/img/banner001.png'
			};
		},
		methods: {
			...mapMutations(['GET_TOKEN', 'LOGIN', 'TO_UPDATE']),
			init() {
				this.getLunBo();
				this.getGongGao();
				this.getRiChang();
				this.getOpenID();
			},
			nav(e) {
				if (this.isTap) {
					if (e === '../ReportLoss/ReportLoss' || e === '../dogLogout/dogLogout' || e === '../nianjian/nianjian') {
						uni.request({
							url: this.URL + 'getUserByOpenId',
							data: {
								wxid: this.TOKEN
							},
							success: res => {
								console.log('挂失列表');
								console.log(res.data.data.length);
								if (res.data.data.length > 0) {
									uni.navigateTo({
										url: e
									});
								} else {
									CHONG.tip('您提交的信息正在审核，请审核通过后使用此功能', 1);
								}
							}
						});
					} else {
						uni.navigateTo({
							url: e
						});
					}
				} else {
					if (e === '../apply/apply' || e === '../ExposureStation/noticeList' || e === '../StrayDogs/StrayDogs' || e ===
						'../Report/Report' || e === '../personal/personal' || e === '../transfer/Inquire' || e === '../schedule/schedule') {
						uni.navigateTo({
							url: e
						});
					} else {
						this.showXuan();
					}
				}
			},
			showXuan() {
				uni.showModal({
					title: '提示',
					content: '您还不是注册的犬只主人，请先完成注册登记',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: '../apply/apply'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getLunBo() {
				uni.request({
					url: this.URL + 'bannerList',
					success: res => {
						console.log('轮播');
						console.log(res.data);
						this.bannerList = res.data;
					}
				});
			},
			getGongGao() {
				uni.request({
					url: this.URL + 'noticeList',
					success: res => {
						console.log('公告');
						console.log(res.data);
						this.noticeList = res.data;
						uni.stopPullDownRefresh();
					}
				});
			},
			getRiChang() {
				uni.request({
					url: this.URL + 'dynamicslist',
					success: res => {
						console.log('日常');
						console.log(res.data);
						this.dailyList = res.data;
					}
				});
			},
			AppService(e) {
				this.bannerList[e.target.dataset.index].url = this.correctUrl;
			},
			getOpenID(e) {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						console.log('code');
						console.log(loginRes.code);
						uni.request({
							url: this.URL + 'getOpenId',
							data: {
								wxcode: loginRes.code
							},
							success: res => {
								console.log('openId');
								console.log(res.data)
								console.log(res.data.data[0].openid);
								let json = res.data;
								if (json.success) {
									this.LOGIN(json.data[0].openid);
									uni.request({
										url: this.URL + 'getUserByOpenId',
										data: {
											wxid: json.data[0].openid
										},
										success: res => {
											console.log('获取OPendId');
											console.log(res.data);
											if (!res.data.success) {
												// CHONG.tip(res.data.msg, 1);
												this.isTap = false;
											} else {
												this.isTap = true;
											}
										}
									});
								}
							}
						});
					}
				});
			}
		},
		onShow() {
			if (this.UPDATE) {
				this.TO_UPDATE(false);
				this.init();
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			if (this.isLa) {
				this.init();
				this.isLa = false;
				setTimeout(() => {
					this.isLa = true;
				}, 3000);
			} else {
				uni.stopPullDownRefresh();
			}
		}
	};
</script>

<style lang="scss">
	.content {
		&>view {
			padding: 20upx;

			background: {
				color: white;
			}
		}

		.carousel swiper {
			height: 375upx;

			image {
				width: 750upx;
				height: 375upx;
			}
		}

		.notice {
			display: flex;
			height: 130upx;
			flex-direction: row-reverse;

			margin: {
				top: 20upx;
			}

			background: {
				image: url(../../static/img/newsbg.png);
				size: 100% 100%;
			}

			swiper {
				width: 300upx;
				height: 94upx;
				overflow: hidden;

				padding: {
					right: 120upx;
					top: 14upx;
				}

				navigator {
					line-height: 50upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: $chong-text-color;

					font: {
						size: 26upx;
					}
				}
			}
		}

		.nav_h {
			height: 414upx;
		}

		.nav {
			width: 750upx;
			margin-top: 24upx;
			display: flex;
			flex-wrap: wrap;

			.link {
				width: 21%;
				margin: 10upx 2%;
				border-radius: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 15upx 0 5upx;

				image {
					width: 100upx;
					height: 100upx;
					background-color: $chong-iconbg-color;
					border-radius: 35%;
					margin-bottom: 10upx;
				}

				text {
					color: $chong-text-color;

					font: {
						size: 24upx;
					}
				}
			}
		}

		.daily {
			margin: {
				top: 24upx;
			}

			.title {
				line-height: 60upx;

				font: {
					size: 32upx;
				}

				padding: {
					bottom: 10upx;
				}

				display: flex;
				justify-content: space-between;

				text {
					font: {
						weight: 700;
					}
				}

				navigator {
					color: $chong-text-color;

					font: {
						size: 26upx;
					}
				}
			}

			.dailyItem {
				font: {
					size: 26upx;
				}

				text-indent: 1em;
				line-height: 50upx;
				color: $chong-text-color;
				display: flex;
				justify-content: space-between;

				&>view:nth-of-type(1) {
					width: 460upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.moreTip {
			padding-top: 30upx;
			color: rgba(25, 36, 56, 0.3);

			background: {
				color: $chong-bg-color;
			}

			text: {
				align: center;
			}

			font: {
				size: 26upx;
			}
		}

		.fixed {
			position: fixed;
			bottom: 50upx;
			right: 50upx;
			width: 80upx;
			height: 80upx;

			border: {
				radius: 50%;
			}

			box-shadow: 4upx 4upx 9upx #333333;
			opacity: 0.8;
			background: $chong-iconbg-color url(../../static/img/icon001.png);
			background-size: 100% 100%;
		}
	}
</style>
